<template>
  <div class="app-container subGameTabList">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane
        :name="tabNames[$index]" :label="digitalType.title"
                   v-for="(digitalType,$index) in consts.DIGITAL_GAME_TYPE"
                   :key="digitalType.value"
      >
        <sub-game-manager :game-id="digitalType.value" :channelId="rowData.channelId" :gameName="digitalType.title" v-show="activeTab === tabNames[$index]" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import SubGameManager from './subGameManager';

import { tabs } from '@/build';

export default {
  name: 'sub-game-tab-list',
  components: {
    SubGameManager,
  },
  props: ['rowData'],
  mixins: [tabs],

  data() {
    return {
      activeTab: 'one',
      tabNames: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
    };
  },
};
</script>

<style scoped>

</style>
